/**
 * Created by clakeboy on 16/6/18.
 */

import React from 'react';

import {View,NavBar,Container,Group,List,Field} from 'amazeui-touch';

import { Router, Route, hashHistory, Link } from 'react-router';

import $ from 'jquery';

export default class Home extends React.Component {
    constructor(props) {
        super(props);

        var data = [
            {
                thumb: 'http://s.amazeui.org/media/i/demos/bing-1.jpg',
                img: 'http://s.amazeui.org/media/i/demos/bing-1.jpg'
            },
            {
                thumb: 'http://s.amazeui.org/media/i/demos/bing-2.jpg',
                img: 'http://s.amazeui.org/media/i/demos/bing-2.jpg'
            },
            {
                thumb: 'http://s.amazeui.org/media/i/demos/bing-3.jpg',
                img: 'http://s.amazeui.org/media/i/demos/bing-3.jpg'
            },
            {
                thumb: 'http://s.amazeui.org/media/i/demos/bing-4.jpg',
                img: 'http://s.amazeui.org/media/i/demos/bing-4.jpg'
            }];

        this.state = {
            data:data
        };
    }

    onClick(e) {
        console.log(this.context);
        // this.props.history.push('/about');
        // this.context.router.push('/about/123/98/clake');

    }

    onFocus(e) {
        $.ajax('http://800933.wap.beta.weiwubao.com/site/index/cont?form=8881222');
    }

    render() {
        return (
            <View id="app-index">
                <NavBar amStyle="primary" title="这是首页"/>
                <Container scrollable>
                    <Group header="Amaze UI Touch Components" >
                        <Field ref="user_name" label="用户名" placeholder="用户名"/>
                        <Field ref="password" label="密码" placeholder="密码" type="password" onFocus={this.onFocus.bind(this)}/>
                    </Group>
                </Container>
            </View>
        )
    }
}

Home.defaultProps = {
    btn: '按我试试',
    transition: 'rfr'
};

Home.contextTypes = {
    router: React.PropTypes.object
};

const styles = {
    content: {
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        padding:'10px'
    },
    item: {
        display:'flex',
        flex:'1',
        justifyContent:'center'
    }
};